<template>
  <div
    class="card overflow-hidden group animate__animated animate__fadeInUp"
    :style="animationDelay"
  >
    <!-- 文章图片 -->
    <div class="relative h-48 mb-4 overflow-hidden">
      <img
        :src="post.image"
        :alt="post.title"
        class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
      />
      <div
        class="absolute top-3 right-3 bg-primary text-white text-xs px-2 py-1 rounded"
      >
        {{ post.category }}
      </div>
    </div>
    <!-- 文章信息 -->
    <div class="p-5">
      <div class="flex items-center text-text-secondary text-sm mb-2">
        <n-icon size="16" class="mr-1">
          <CalendarOutline />
        </n-icon>
        <span>{{ post.date }}</span>
      </div>
      <h3
        class="text-xl font-semibold mb-2 text-text-primary hover:text-primary transition-colors"
      >
        <NuxtLink :to="`/blog/${post.id}`">{{ post.title }}</NuxtLink>
      </h3>
      <p class="text-text-secondary mb-4">{{ post.excerpt }}</p>
      <NuxtLink
        :to="`/blog/${post.id}`"
        class="text-primary flex items-center hover:underline"
      >
        阅读更多
        <n-icon class="ml-1">
          <ArrowForwardOutline />
        </n-icon>
      </NuxtLink>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CalendarOutline, ArrowForwardOutline } from "@vicons/ionicons5";

// 定义组件的props
const props = defineProps({
  post: {
    type: Object,
    required: true,
  },
  index: {
    type: Number,
    default: 0,
  },
});

// 计算动画延迟
const animationDelay = computed(() => {
  return `animation-delay: ${props.index * 0.1}s`;
});
</script>

<style scoped>
/* 添加移动端优化 */
@media (max-width: 768px) {
  .card {
    margin-bottom: 1rem;
  }

  /* 调整图片高度 */
  .card .relative.h-48 {
    height: 180px;
  }

  /* 调整内容padding */
  .card .p-5 {
    padding: 1rem;
  }

  /* 调整文字大小 */
  .card h3 {
    font-size: 1.1rem;
  }

  /* 优化截取文本，防止溢出 */
  .card p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 4.5em;
  }
}
</style>
